<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar title="开工" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="qrkssgRuleForm" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="预计开工日期" borderBottom @click="openDatetimePicker">
								<u--input
									placeholder="预计开工日期"
									inputAlign="left"
									v-model="qrkssgRuleForm.start_date"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="工长" borderBottom @click="cascaderFunc">
								<u--input
									placeholder="选择工长"
									inputAlign="left"
									v-model="qrkssgRuleForm.foreman_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>

							<u-form-item labelPosition="top" labelWidth="100%" required label="开工文件 (.jpg,.png,.gif)">
								<file-upload :count="1" :type="1" @afterRead="afterRead" @delete="deletePic"></file-upload>
							</u-form-item>

							<u-form-item labelPosition="top" labelWidth="100%" label="备注">
								<u--textarea
									disableDefaultPadding
									v-model="qrkssgRuleForm.remark"
									border="none"
									placeholder="备注"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						text="提交"
						@click="submit"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
			<!-- 工长 -->
			<u-picker
				ref="foremanShow"
				title="工长"
				closeOnClickOverlay
				:show="foremanShow"
				:columns="[foremanList]"
				@confirm="confirmFunc"
				@cancel="closeFunc"
				@close="closeFunc"
				keyName="name"
			></u-picker>
			<!-- 年月日时分秒 -->
			<buuug7-simple-datetime-picker
				ref="myPicker"
				@submit="handleSubmit"
				:start-year="2000"
				:end-year="2099"
				:time-hide="[true, true, true, true, true, true]"
				:time-label="['年', '月', '日', '时', '分', '秒']"
			/>
		</pageTxt>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			qrkssgRuleForm: {
				project_id: '',
				start_date: '',
				foreman_id: '',
				foreman_name: '',
				remark: '',
				start_file: []
			},
			foremanList: [],
			foremanShow: false
		};
	},
	onLoad(option) {
		this.qrkssgRuleForm.project_id = option.id;
		this.getForemanList();
	},
	methods: {
		//工长弹窗选择
		confirmFunc(e) {
			console.log(e);
			this.qrkssgRuleForm.foreman_id = e.value[0].id;
			this.qrkssgRuleForm.foreman_name = e.value[0].name;
			this.closeFunc();
		},
		// 工长弹窗关闭
		closeFunc() {
			this.foremanShow = false;
		},
		// 工长弹窗开启
		cascaderFunc() {
			this.foremanShow = true;
		},
		// 工长列表
		getForemanList() {
			this.$Api
				.getForemanList({
					page: 1,
					num: 999,
					show_deactivate: 2
				})
				.then((res) => {
					console.log(res, '工长列表');
					if (res.code == 200) {
						this.foremanList = res.data.list;
					}
				})
				.catch((err) => {});
		},
		// 日期选择
		handleSubmit(e) {
			console.log(e);
			this.qrkssgRuleForm.start_date = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
		},
		openDatetimePicker() {
			this.$refs.myPicker.show();
		},
		afterRead(files) {
			files.map((item) => {
				let obj = {
					url: item.url
				};
				this.qrkssgRuleForm.start_file.push(obj);
				console.log(this.qrkssgRuleForm.start_file, 'afterRead');
			});
		},
		deletePic(e) {
			console.log(e, 'deletePic');
			this.qrkssgRuleForm.start_file.splice(e.index, 1);
		},
		async submit() {
			let qrkssgRuleForm = this.qrkssgRuleForm;
			if (!qrkssgRuleForm.start_date) {
				uni.showToast({
					title: '请选择预计开工日期',
					icon: 'error'
				});
				return;
			}
			if (!qrkssgRuleForm.foreman_name) {
				uni.showToast({
					title: '请选择工长',
					icon: 'error'
				});
				return;
			}
			if (!qrkssgRuleForm.start_file.length) {
				uni.showToast({
					title: '请选择开工文件',
					icon: 'error'
				});
				return;
			}
			uni.showLoading({
				title: '文件上传中',
				mask: true
			});
			let data = {
				project_id: qrkssgRuleForm.project_id,
				start_date: qrkssgRuleForm.start_date,
				foreman_id: qrkssgRuleForm.foreman_id,
				foreman_name: qrkssgRuleForm.foreman_name,
				remark: qrkssgRuleForm.remark
			};
			let start_file = await this.$upload(qrkssgRuleForm.start_file);
			uni.hideLoading();
			data.start_file = start_file.arrResult;
			this.onSiteStartup(data);
		},
		// 开工
		onSiteStartup(data) {
			uni.showLoading({
				title: '信息提交中',
				mask: true
			});
			this.$Apipc.onSiteStartup(data).then((res) => {
				uni.hideLoading();
				console.log(res, '开工');
				if (res.code == 200) {
					setTimeout(() => {
						var currentPages = getCurrentPages()[getCurrentPages().length - 2];
						if (currentPages) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}, 500);
				}
				uni.showToast({
					title: res.code == 200 ? '操作成功' : res.message,
					icon: res.code == 200 ? 'success' : 'error'
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
